<template>
  <div class="app-container">
    <div class="mark">
      <span style="font-size:20px;font-weight:bold;margin-left:10px" class="mark-item">bug率统计</span>
    </div>
    <div class="AutoReport">
      <div>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-row v-if="loadinglowerPartFlag" v-loading="loading" style="margin-top: 0px; width: 300%; height: 400%" />
            <el-row>
              <MixLineChartBuild :id="'lintData_build'" :width="'80%'" height="600%" :chart-data="lintData_build" title="bug率统计" />
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import MixLineChartBuild from './components/MixLineChart'
import { getBugRatedata } from '@/api/bug-calcuDay'
export default {
  components: {
    MixLineChartBuild
  },
  data() {
    return {
      options: [],
      lintData_build: [],
      lintData: [],
      lintData_Bug: [],
      lintData_Case_Num: [],
      tableData: [],
      loading: true,
      loadinglowerPartFlag: false,
      loadingGetTotalFlag: false
    }
  },
  created() {
    this.getBugRatedata()
  },
  methods: {
    See(e) {
      window.open(e)
    },
    getBugRatedata() {
      getBugRatedata()
        .then((res) => {
          this._data.lintData_build = [
            {
              color: '#FF0000',
              counter: res.data[0].counter,
              name: 'bug密度',
              type: 'line'
            },
            {
              color: '#46A3FF',
              counter: res.data[1].counter,
              name: '首轮漏测率',
              type: 'line'
            },
            {
              color: '#FFE153',
              counter: res.data[2].counter,
              name: '引入错误率',
              type: 'line'
            }
          ]
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
          this.loadinglowerPartFlag = true
          this.getBugRatedata()
        })
    },
    handleSearch() {
      this.getDate()
    }
  }
}

</script>
<style scoped>
.title {
  font-size: 22px;
  border-bottom: 1px solid black;
}

.mark {
  border-radius: 4px;
  margin: 10px 0 30px;
  background-color: #1890ff;
  height: 40px;
  line-height: 40px;
  color: #fff;
}

.AutoReport {
  width: 95%;
  height: 100%;
  margin: 40px 30px;
  position: relative;
  background-color: #ffffff;
}

.row {
  display: flex;
  height: 48px;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 30px;
}

.row>.col {
  display: flex;
  min-width: 200px;
  align-items: center;
}

.case_table {
  margin-top: 0px;
}

.bug_ranking {
  height: 50px;
}

#lintData_build {
  margin: 0 auto;
}

</style>
